$(function () {
    //定义一个全局变量对象
    //将来筛选和分页都可以修改
    let query = {
        pagenum: 1,//  是	int	页码值
        pagesize: 2,//  是	int	每页显示多少条数据
        cate_id: '',//  否	string	文章分类的 Id
        state: '',//  否	string	文章的状态，可选值有：已发布、草稿
    };

    //1.展示文章列表
    let layer = layui.layer;
    initArticleList();
    //封装成函数，后面删除/筛选/分页都会用到
    function initArticleList() {
        axios({
            method: "GET",
            url: "/my/article/list",
            params: query
        }).then(res => {
            if (res.data.status !== 0) return layer.msg(res.data.message);
            //console.log(res.data);
            //渲染
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(
                    //<a href='/article/art_edit.html?id=${ele.Id}' class="layui-btn layui-btn-xs">编辑</a>
                    //这个a不需要加target,因为现在本身就在iframe里，在iframe里跳转
                    `
                    <tr>
                          <td>${ele.title}</td>
                          <td>${ele.cate_name}</td>
                          <td>${dateFormat(ele.pub_date)}</td>
                          <td>${ele.state}</td>
                          <td>
                             <a href='/article/art_edit.html?id=${ele.Id}' class="layui-btn layui-btn-xs">编辑</a>
                             <button data-id='${ele.Id}' class="btn-del layui-btn layui-btn-xs layui-btn-danger">
                               删除
                             </button>
                          </td>
                    </tr>

                    `
                )
            })
            $('tbody').empty().html(arr.join(""))
            //赋值渲染列表之后做分页
            pageRender(res.data.total)
        })
    }

    //2.初始化文章分类
    let form = layui.form;
    initArtCateList();
    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates',
        }).then(res => {
            if (res.data.status !== 0) return layer.msg(res.data.message);
            let arr = [`<option value="">请选择文章类别</option>`];
            res.data.data.forEach(ele => {
                arr.push(
                    `
                     <option value="${ele.Id}">${ele.name}</option>
                    `
                )
            });
            $('[name=cate_id]').empty().html(arr.join(''));
            //有些表单元素是动态插入的，这时 form 模块 的自动化渲染是会对其失效的
            //option是动态插入的，form.render()必须写，否则option列表不显示
            form.render()
        })
    }

    //3.筛选
    $("#formSearch").on('submit', function (e) {
        e.preventDefault();
        query.cate_id = $("[name=cate_id]").val();
        query.state = $("[name=state]").val();
        initArticleList();
    })

    //4.分页
    let laypage = layui.laypage;
    function pageRender(total) {
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 pageBox 是 ID，不用加 # 号
            count: total,     //数据总数，从服务端得到
            limit: query.pagesize,//每页显示的条数
            curr: query.pagenum,//起始页
            layout: ['count', 'limit', 'prev', 'page', 'next', "skip"],//配置自定义化分页
            limits: [2, 3, 5, 10],
            //当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
            jump: function (obj, first) {
                // //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {
                    //do something
                    // //修改参数，重新渲染页面
                    query.pagenum = obj.curr
                    query.pagesize = obj.limit
                    initArticleList();
                }
            }
        });
    }

    //5.删除
    $("tbody").on('click', '.btn-del', function () {
        let id = $(this).attr('data-id');
        layer.confirm('确定要删除文章吗？', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                method: "GET",
                url: "/my/article/delete/" + id,
            }).then(res => {
                if (res.data.status != 0) return layer.msg(res.data.message);
                layer.msg("删除文章成功！");
                //有一个bug,删除最后一页最后一个数据后，不显示上一页的数据
                //解决：当前页只有一条数据时，query.pagenum自减；而且query.pagenum如果是第一页就不能再自减
                //!!!自己写的时候出现一个问题，显示删除成功，也加了类名，但是仍然不显示上一页的数据
                //是因为给编辑也增加了btn-del的类名
                //老师解决思路：
                //console.log($(".btn-del").length); =>2 //说明页面有两个类名
                //console.log(query.pagenum);  
                //console.log($(".btn-del").length == 1 && query.pagenum >= 2);

                //！！！！！自己再有错误的时候理清逻辑，逐步打印分析
                if ($(".btn-del").length == 1 && query.pagenum >= 2) {
                    query.pagenum--;
                };
                //优化
                //$(".btn-del").length == 1 && query.pagenum >= 2 && query.pagenum--
                initArticleList();
            })
            layer.close(index);
        });
    })

})